<template>
  <div
    id="echart"
    class="echart_container"
    ref="echart"
    :style="containerStyle"
  ></div>
</template>
<script>
// echarts 按需引入
import * as echarts from "echarts/core";
import {
  TitleComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart, PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  BarChart,
  PieChart,
  CanvasRenderer,
]);

export default {
  name: "echartPie",
  data() {
    return {
      element: null,
      options: {
        title: {
          text: "征收面积",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "80%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["20%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      },
      containerStyle: { width: "400px", height: "280px" },
    };
  },
  mounted() {
    this.element = this.$refs.echart;
    this.initCharts(this.element, this.options);
  },
  methods: {
    initCharts(element, options) {
      // 初始化echarts实例
      var myChart = echarts.init(element);
      // 绘制图表
      myChart.setOption(options);
    },
  },
};
</script>
<style scoped>
.echart_container {
  /* width: 576px;
  height: 280px; */
  margin: 0 auto;
  overflow: hidden;
}
</style>